<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人中心</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="http://localhost/campus/">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/person.css"/>
    <script src="static/js/jquery.min.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <jsp:include page="/pages/common/header.jsp"/>

    <%--主体内容--%>
    <div class="layui-row center">
        <div class="layui-col-xs2 layui-col-sm2 layui-col-md2">
            <div class="center_category">
                <ul class="layui-nav layui-nav-tree layui-inline layui-this" lay-shrink="all" style="background: #797979;">
                    <li class="layui-nav-item layui-this">
                        <a href="javascript:;" style="background: #797979;">修改信息</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="person/myRelease?curPage=1" style="background: #797979;">我的发布</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="person/myFavorite" style="background: #797979;">我的收藏</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="person/myOrder" style="background: #797979;">我的订单</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-col-xs10 layui-col-sm10 layui-col-md10">
            <div class="person_body">
                <div class="personInfo_left">
                    <div class="layui-progress" lay-filter="uploadImgProgress" style="height: 3px;display: none;">
                        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%" style="height: 3px;"></div>
                    </div>
                    <form id="person_form" class="layui-form" action="person/updatePersonInfo" method="post">
                        <div id="uploadImg" class="personInfo_avatar">
                            <img id="avatar" alt="" src="${sessionScope.user.avatar}">
                            <input id="avatarInput" title="" name="avatar" value="" style="display: none;"/>
                        </div>
                        <div class="layui-form-item personInfo_item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-block">
                                <input id="username" title="" type="text" name="username" required lay-verify="username"
                                       placeholder="请输入新的昵称"
                                       autocomplete="off" class="layui-input" value="${sessionScope.user.username}">
                            </div>
                        </div>
                        <div class="layui-form-item personInfo_item">
                            <label class="layui-form-label">真实姓名</label>
                            <div class="layui-input-block">
                                <c:if test="${sessionScope.user.realName==null}">
                                    <input title="" type="text" name="realName" lay-verify="realName"
                                           placeholder="请输入你的真实姓名"
                                           autocomplete="off" class="layui-input">
                                </c:if>
                                <c:if test="${sessionScope.user.realName!=null}">
                                    <p>${sessionScope.user.realName}</p>
                                </c:if>
                            </div>
                        </div>
                        <div class="layui-form-item personInfo_item">
                            <label class="layui-form-label">联系方式</label>
                            <div class="layui-input-block">
                                <p>${sessionScope.user.phone}</p>
                            </div>
                        </div>
                        <div class="layui-form-item personInfo_item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="0"
                                       title="男" ${sessionScope.user.sex == 0? "checked":""}>
                                <input type="radio" name="sex" value="1"
                                       title="女" ${sessionScope.user.sex == 1? "checked":""}>
                                <input type="radio" name="sex" value="2"
                                       title="保密" ${sessionScope.user.sex == 2? "checked":""}>
                            </div>
                        </div>
                        <div class="layui-form-item personInfo_item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input id="password" title="" type="password" name="password" required
                                       lay-verify="password"
                                       placeholder="请输入密码" autocomplete="off" class="layui-input"
                                       value="${sessionScope.user.password}">
                            </div>
                        </div>
                        <div class="layui-form-item personInfo_item">
                            <label class="layui-form-label">宿舍</label>
                            <div class="layui-input-block">
                                <input type="text" title="" name="address" lay-verify="address"
                                       placeholder="请输入宿舍地址"
                                       autocomplete="off" class="layui-input" value="${sessionScope.user.address}">
                            </div>
                        </div>

                        <div class="personInfo_item">
                            <button class="layui-btn layui-btn-normal layui-btn layui-btn-sm" lay-submit
                                    lay-filter="person_save">保存
                            </button>
                            <button class="layui-btn layui-btn-primary layui-btn layui-btn-sm" id="reset">
                                重置
                            </button>
                        </div>
                    </form>
                </div>
                <div class="personInfo_right">
                    <div class="personInfo_nav">今天：
                        <span id="date_display"></span>
                        <span id="date_display2" style="float: right;margin-right: 24px;"></span>
                    </div>
                    <div id="date"></div>
                </div>
            </div>
        </div>
    </div>


    <%@include file="/pages/common/footer.jsp" %>
</div>
<script>
    var isRealName = false;


    var element = null;
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        element = layui.element;

        //…
    });

    var layer = null;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    layui.use('laydate', function () {
        let laydate = layui.laydate;
        laydate.render({
            elem: '#date'
            , position: 'static'
            , calendar: true
            , btns: ['now']
            , theme: '#393D49'
            , ready: function (date) {
                let curDate = date.year + " 年 " + date.month + " 月 " + date.date + " 日";
                lay('#date_display').html(curDate);
                lay("#date_display2").html(getWeek());

            }
        });
    });


    layui.use('form', function () {
        var form = layui.form;

        //表达验证
        form.verify({
            username: function (value) {
                if (value === "")
                    return "昵称不能为空";
                if (value.length > 20)
                    return "昵称的长度不得超高20个字符";
            }
            , realName: function (value) {
                let username = $('#username').val();
                let password = $('#password').val();
                if (value !== "" && username !== "" && password !== "" && password.length >= 6) {
                    layer.confirm('实名之后将不可更改，确定实名吗？', {
                        icon: 3
                        , title: '提示'
                    }, function (index) {
                        $('#person_form').submit();
                        layer.close(index);
                    });
                }
            }
            , password: function (value) {
                if (value === "")
                    return "密码不能为空";
                if (value.length < 6)
                    return "密码的长度不得小于6个字符";
            }
            , address: function (value) {
                if (value.length > 20)
                    return "宿舍地址的长度不得超高20个字符";
            }
        });

        //监听提交
        form.on('submit(person_save)', function (data) {
            return data.field.realName === undefined || data.field.realName === "";
        });
    });

    layui.use('upload', function () {
        let upload = layui.upload;

        //执行实例
        let uploadInst = upload.render({
            elem: '#uploadImg' //绑定元素
            , url: 'http://localhost/campus/user/upload' //上传接口
            , accept: "image"
            , acceptMime: 'image/*'
            , before: function () {
                $($('.layui-progress')[0]).css("display", "block");
            }
            , done: function (res) {
                $("#avatar").attr("src", res.data.imgUrl);
                $("#avatarInput").val(res.data.imgUrl);
                setTimeout(function () {
                    element.progress('uploadImgProgress', 0 + "%");
                    $($('.layui-progress')[0]).css("display", "none");
                }, 1000);
            }
            , error: function () {
                //请求异常回调
                layer.msg("图片上传异常", {
                    icon: 3
                    , time: 2000
                });
                setTimeout(function () {
                    element.progress('uploadImgProgress', 0 + "%");
                    $($('.layui-progress')[0]).css("display", "none");
                }, 3000);
            }
            , progress: function (n) {
                var percent = n + '%';//获取进度百分比
                element.progress('uploadImgProgress', percent);
            }
        });
    });

    $('#reset').click(function () {
        window.location.reload();
        return false;
    });


    function getWeek() {
        let today = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        let day = new Date();
        let index = day.getDay();
        return today[index]
    }
</script>
</body>
</html>
